<template>
  <div class="brokers">
      <div class="header">
        <div class="header_bg">
          <input type="text" placeholder="请输入需要查询的经纪人" placeholder-style="color:#fff;font-size:30rpx" @input="changeInputs">
        </div>
        <div class="header_hot">
          <div v-for="(item,index) in list" :key="item.id" :class="'head_hot'+(index+1)" @click="goDetail(item)">
            <img :src="item.img" alt="">
            <p></p>
            <span>
              {{item.cname}}
            </span>
          </div>
        </div>
      </div>
      <div class="main">
        <div v-for="(item,index) in listData" :key="item.id">
          <dl @click="goDetail(item)">
            <dt>
              <p>{{index+4}}</p>
              <img :src="item.img" alt="">
            </dt>
            <dd>
              <h3>{{item.cname}}</h3>
              <p>{{item.tname}}</p>
            </dd>
          </dl>
          <div>
            <p>
              <i class="iconfont icon-xiaoxi" style="color:red"></i>
            </p>
            <p>
              <i class="iconfont icon-dianhua" style="color:red"></i>
            </p>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import {getHomeBroker} from '../../../mock/home/index';
import '../../../g_icon/111/iconfont.css'

export default {
    data() {
      return {
        list:[],
        listData:[],
        values:'',
      }
    },
    mounted() {
      let res = getHomeBroker();
      this.list = res.slice(0,3);
      this.listData = res.slice(3);
      console.log(this.listData)
    },
    methods: {
      // 去详情页面
      goDetail(item){
        wx.navigateTo({
          url: `/pages/home/Broker/BrokerDetail?id=${item.id}`,
        })
      },
      // 改变值
      changeInputs(e){
       console.log(e.target.value)
       this.listData = this.list.filter(item=>item.cname.includes(e.target.value));
      }
    }
}
</script>
<style lang="scss" scoped>
.brokers{
    width: 100%;
    height: 100%;
    .header{
      width: 100%;
      height: 520rpx;
      background-color: rgb(251, 101, 106);
      position: relative;
      .header_bg{
        width: 100%;
        height: 360rpx;
        background-image: url(https://images.tengfangyun.com/images/new_icon/adviser_list_bg1.png?x-oss-process=style/w_8601);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        input{
          width: 88%;
          height: 60rpx;
          margin: 0 auto;
          background-color: rgb(251, 193, 194);
          border-radius: 5rpx;
          text-align: center;
          line-height: 60rpx;
        }
      }
      .header_hot{
        width: 90%;
        height: 380rpx;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        left: 36rpx;
        .head_hot1{
          width: 32.5%;
          height: 275rpx;
          background-color: #fff;
          border-top-right-radius: 10rpx;
          border-top-left-radius: 10rpx;
          position: relative;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-around;
          img{
            width: 110rpx;
            height: 110rpx;
            border-radius: 50%;
          }
          p{
            width: 90%;
            height: 80rpx;
            background-image: url(https://images.tengfangyun.com/images/new_icon/No2.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: absolute;
            top: 120rpx;
            left: 8rpx;
          }
          span{
            display: inline-block;
            width: 100%;
            text-align: center;
            font-size: 32rpx;
          }
        }
        .head_hot2{
          @extend .head_hot1;
          padding-bottom: 40rpx;
          p{
            background-image: url(https://images.tengfangyun.com/images/new_icon/No1.png);
          }
        }
        .head_hot3{
          @extend .head_hot1;
          p{
            background-image: url(https://images.tengfangyun.com/images/new_icon/No3.png);
          }
        }
      }
    }
    .main{
      width: 100%;
      border-top: solid 20rpx #eee;
      >div{
        width: 90%;
        height: 200rpx;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 2rpx #ccc;
        dl{
          display: flex;
          dt{
            display: flex;
            align-items: center;
            img{
              width: 120rpx;
              height: 120rpx;
              border-radius: 50%;
              margin: 0 20rpx;
            }
          }
          dd{
            line-height: 50rpx;
            p{
              color: #ccc;
            }
          }
        }
        >div{
          display: flex;
          p{
            width: 64rpx;
            height: 64rpx;
            background: rgba(251, 101, 106, 0.12);
            border-radius: 50%;
            margin-right: 20rpx;
            text-align: center;
            line-height: 64rpx;
          }
        
        }
      }
    }
}
</style>